﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Test_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<title></title>
	<script type="text/javascript" src="../JS/jquery-1.7.1.js"></script>
	<script type="text/javascript" src="../JS/jquery.idTabs.min.js"></script>
	<style type="text/css">
		*
		{
			padding: 0 0 0 0;
			margin: 0 0 0 0;
		}
		ul
		{
			list-style: none;
			border: 0px solid black;
			float: left;
			width: 100%;
			margin: 0 0 0 0;
			padding: 0 0 0 0;
		}
		li
		{
			float: left;
			width: 100px;
			height: 25px;
			border: 0px solid black;
			
			padding-top: 5px;
			font-size: 20px;
			padding-top: 6px !important;
		}
		a
		{
			text-decoration: none;
		}
		.selected
		{
			float: left;
			width: 100px;
			height: 25px;
			border: 1px solid black;
			border-bottom: 0px;
			z-index: 100;
			
			font-size: 20px;
			background-color: White;
			cursor:pointer;
			
				
		}
		.Content
		{
			border: 1px solid black;
			float: left;
			width: 100%;
			height: 300px;
			margin: 0 0 0 0;
			padding: 3 0 0 0;
			background-color: White;
			
		}
	</style>
</head>
<body>
	<form id="form1" runat="server">
	<div id="usual1" class="usual" style="float: left; width: 500px; height: 500px; border: 0px solid black; margin: 10px 0 0px 10px;">
		
			<ul>
				<li><a class="selected" href="#tab1">Tab 1</a> </li>
				<li><a href="#tab2">Tab 2</a> </li>
				<li><a href="#tab3">Tab 3</a> </li>
			</ul>
		
		<div id="tab1" class="Content">
			This is tab 1.</div>
		<div id="tab2" class="Content">
			More content in tab 2.</div>
		<div id="tab3" class="Content">
			Tab 3 is always last!</div>
	</div>
	<script type="text/javascript">		$("#usual1 ul").idTabs(); </script>
	<%--<div id="usual2" class="usual">
		<ul>
			<li><a class="selected" href="#tab4">Tab 1</a> </li>
			<li><a href="#tab5">Tab 2</a> </li>
			<li><a href="#tab6">Tab 3</a> </li>
		</ul>
		<div id="tab4">
			<div>
				123</div>
			This is tab 1.</div>
		<div id="tab5">
			<div>
				456</div>
			More content in tab 2.</div>
		<div id="tab6">
			<div>
				789</div>
			Tab 3 is always last!</div>
	</div>
	<script type="text/javascript">		$("#usual2 ul").idTabs(); </script>--%>
	</form>
</body>
</html>
